<template>
<div class="app-container">
    <!--查询表单-->
    <el-form :inline="true">
        <el-form-item>
            <el-autocomplete class="inline-input" v-model="searchObj.name" :fetch-suggestions="querySearch" placeholder="讲师" :trigger-on-focus="false" value-key="name"></el-autocomplete>
        </el-form-item>

        <el-form-item>
            <el-select v-model="searchObj.level" clearable placeholder="头衔">
                <el-option value="1" label="高级讲师" />
                <el-option value="2" label="首席讲师" />
            </el-select>
        </el-form-item>

        <el-form-item label="入驻时间">
            <el-date-picker v-model="searchObj.joinDateBegin" placeholder="开始时间" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="-">
            <el-date-picker v-model="searchObj.joinDateEnd" placeholder="结束时间" value-format="yyyy-MM-dd" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
            <el-button type="default" @click="resetData()">清空</el-button>
        </el-form-item>
    </el-form>
    <div style="float: right;margin-bottom: 15px;">
        <el-button size="mini" type="danger" @click="batchDelete">批量删除</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="list" ref="multipleTable" highlight-current-row border stripe style="width: 100%" @selection-change="handleSelectionChange" @row-click="rowClick">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="#" width="50" align="center">
            <template slot-scope="scope">
                {{ (page - 1) * limit + scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180" align="center" />
        <el-table-column prop="intro" label="资历" width="180" align="center">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.level === 1">高级讲师</el-tag>
                <el-tag v-if="scope.row.level === 2" type="success">首席讲师</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="intro" label="资历" width="180" align="center" />
        <el-table-column prop="sort" label="地址" width="180" align="center" />
        <el-table-column prop="joinDate" label="入驻时间" width="180" align="center" />
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <router-link :to="'/teacher/edit/'+scope.row.id">
                    <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                </router-link>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)" icon="el-icon-delete">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- ,,, -->
    <el-pagination :current-page="page" :total="total" :page-sizes="[5, 10, 15]" :page-size="limit" :page-count="limit" background layout="->,prev, pager, next,jumper,sizes,total" @current-change="ChangeCurrenrPage" @size-change="ChangeSizePage" />
</div>
</template>

<script>
import teacherApi from "@/api/teacher";
export default {
    name: "",
    components: {},
    props: {},
    data() {
        return {
            list: [],
            total: 0,
            page: 1,
            limit: 5,
            searchObj: {},
            multipleSelection: []
        };
    },
    computed: {},
    watch: {},
    created() {
        this.fetchData();
    },
    mounted() {},
    beforeDestroy() {},
    methods: {
        // 加载分页查询事件
        fetchData() {
            teacherApi
                .pageList(this.page, this.limit, this.searchObj)
                .then((request, response) => {
                    this.list = request.data.rows;
                    this.total = request.data.total;
                });
        },
        // 当前页改变事件
        ChangeCurrenrPage(page) {
            this.page = page;
            this.fetchData();
        },
        // pageSize 多少页一条改变时会触发
        ChangeSizePage(limit) {
            this.limit = limit;
            this.fetchData();
        },
        //清空
        resetData() {
            this.searchObj = {};
            this.fetchData();
        },
        //删除
        handleDelete(id) {
            this.$confirm('此操作将删除该讲师, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                teacherApi.deleteOne(id).then((request, response) => {
                    //刷新页面
                    this.fetchData();
                    //提示消息
                    if (request.code == 20000) {
                        this.$message({
                            message: request.message,
                            type: "success",
                        });
                    } else {
                        this.$message.error(request.message);
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //当选择项发生变化时会触发该事件
        handleSelectionChange(selection) {
            console.log(selection)
            this.multipleSelection = selection
        },
        //批量删除
        batchDelete() {
            if (this.multipleSelection.length === 0) {
                this.$message({
                    message: "请选择需要删除的数据",
                    type: "warning",
                });
            } else {
                this.$confirm(`此操作将删除这些讲师, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //获取选中的讲师ID数据
                    const idList = [];
                    this.multipleSelection.forEach(item => {
                        idList.push(item.id)
                    });
                    teacherApi.deleteBatch(idList).then((request, response) => {
                        //刷新页面
                        this.fetchData();
                        //提示消息
                        if (request.code == 20000) {
                            this.$message({
                                message: request.message,
                                type: "success",
                            });
                        } else {
                            this.$message.error(request.message);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        //输入建议
        querySearch(queryString, callback) {
            teacherApi.selectNameListByKey(queryString).then((req, rep) => {
                callback(req.data.nameList)
            })
        },
        //行点击事件
        rowClick(row, column, event) {
            this.$refs.multipleTable.toggleRowSelection(row);
            column.path[1]
        }

    },
};
</script>

<style>
</style>
